<template>
  <div>
    <a-card :bordered='false'>

      <!--  #####################操作###################  -->
      <div class='table-operator'>
        <a-button v-action:add type='primary' icon='plus' @click='handleAdd()'>新建</a-button>
        <a-button v-action:query type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
      </div>

      <!--  #####################表格###################  -->
      <s-table ref='table' :columns='columns' :data='loadData'>
        <span slot='fileUrl' slot-scope='text, record'>
          <img :src='text' alt='' style='max-width: 150px'>
        </span>
        <span slot='action' slot-scope='text, record'>
        <template>
          <a v-action:edit @click='handleEdit(record)'>编辑</a>
          <a-divider v-action:edit type='vertical' />
          <a v-action:delete @click='handleDel(record)'>删除</a>
        </template>
      </span>
      </s-table>

      <!--  #####################打开的页面###################  -->
      <edit ref='createModal' :customers='customers' @ok='refresh' />
    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import edit from './detailsEdit'
import { selectPage, del} from '@/api/product/details'

/**
 * 组件
 */
const components = { STable, edit }

const columns = [
  {
    title: '图片',
    dataIndex: 'fileUrl',
    scopedSlots: { customRender: 'fileUrl' },
    width: 150
  },
  {
    title: '排序',
    dataIndex: 'sortNo',
    width: 60
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 150,
    scopedSlots: {
      customRender: 'action'
    }
  }
]

/**
 * 数据
 */
const data = function() {
  return {
    // 高级搜索 展开/关闭
    advanced: false,
    // 查询参数
    queryParam: {},
    columns,
    loading: false,
    editProps: [],
    customers: [],
    storeCode: null,
    productId:null,
    // 加载数据方法 必须为 Promise 对象
    loadData: parameter => {
      parameter.id = this.productId;
      return selectPage(Object.assign(parameter, this.queryParam)).then(res => {
        return res.data
      })
    }
  }
}

const created = function() {
  this.productId = this.$route.query.masterId;
}

/**
 * 过滤器
 */
const filters = {
  statusFilter(status) {
    return statusMap[status].text
  },
  statusColorFilter(status) {
    return statusMap[status].status
  }
}

/**
 * 计算属性
 */
const computed = {}

/**
 * 侦听器
 */
const watch = {}

export default {
  name: 'merCouponList',
  data: data,
  components: components,
  created: created,
  filters: filters,
  computed: computed,
  watch: watch,
  /**
   * 方法
   */
  methods: {
    handleAdd() {
      this.$refs.createModal.add(this.productId)
    },
    refresh() {
      this.$refs.table.refresh()
    },
    handleEdit(record) {
      this.$refs.createModal.edit(record)
    },
    handleDel(record) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: `真的要删除吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          // 在这里调用删除接口
          del(record.id).then(res => {
            if (res.code === 200) {
              _this.$message.success(res.message)
              _this.$refs.table.refresh()
            }
            if (res.code === 500) {
              _this.$message.error(res.message)
            }
          })
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
